<template>
  <section>
    <div class="container">
      <div class="container-title">查询条件</div>
      <div class="container-body pd">
        <el-form
          label-position="right"
          label-width="100px"
          :model="searchForm"
          ref="searchForm"
          class="demo-form-inline"
        >
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="卡编号：" size="small" prop="number">
                <el-input
                  v-model="searchForm.number"
                  placeholder="请输入卡编号"
                  prefix-icon="el-icon-search"
                  size="small"
                />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="分类编码：" size="small" prop="groupIngId">
                <el-select
                  v-model="searchForm.groupIngId"
                  clearable
                  placeholder="请选择"
                  size="small"
                >
                  <el-option
                    v-for="item in goodsClassList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品名称：" size="small" prop="goodsName">
                <el-input
                  v-model="searchForm.goodsName"
                  placeholder="请输入商品名称"
                  prefix-icon="el-icon-search"
                  size="small"
                />
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="是否激活：" size="small" prop="isActivation">
                <el-select
                  v-model="searchForm.isActivation"
                  clearable
                  placeholder="请选择"
                  size="small"
                >
                  <el-option
                    v-for="item in optionsisActivation"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="4.5">
              <el-form-item label="是否兑换：" size="small" prop="IsExchange">
                <el-select
                  v-model="searchForm.IsExchange"
                  clearable
                  placeholder="请选择"
                  size="small"
                >
                  <el-option
                    v-for="item in optionsIsExchange"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4.5">
              <el-form-item label="是否冻结：" size="small" prop="IsFrozen">
                <el-select
                  v-model="searchForm.IsFrozen"
                  clearable
                  placeholder="请选择"
                  size="small"
                >
                  <el-option
                    v-for="item in optionsIsFrozen"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-button
              class="is-tableBtn"
              size="small"
              @click="clearForm('searchForm')"
              >清空</el-button
            >
            <el-button
              class="is-tableBtn"
              type="primary"
              size="small"
              @click="GetTbCardList(searchForm)"
              >查询</el-button
            >
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="container">
      <div class="container-title">卡包列表</div>
      <div class="container-body pd">
        <el-row>
          <el-button
            type="primary"
            class="btnAdd"
            size="small"
            @click="createNew()"
            >新增</el-button
          >
          <el-button
            type="warning"
            class="btnAdd"
            size="small"
            @click="openSetActive(true)"
            >批量激活卡状态</el-button
          >
          <el-button
            type="warning"
            class="btnAdd"
            size="small"
            @click="openSetActive(false)"
            >批量取消激活状态</el-button
          >
          <el-button
            type="warning"
            class="btnAdd"
            size="small"
            @click="openSetFrozens(true)"
            >批量激活冻结状态</el-button
          >
          <el-button
            type="warning"
            class="btnAdd"
            size="small"
            @click="openSetFrozens(false)"
            >批量取消冻结状态</el-button
          >
        </el-row>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          @selection-change="checkAll"
        >
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column prop="cardBagNumber" label="卡包编号" align="center">
          </el-table-column>
          <el-table-column prop="number" label="卡编号" align="center">
          </el-table-column>
          <el-table-column prop="groupIngName" label="分组名称" align="center">
          </el-table-column>
          <el-table-column prop="goodsName" label="商品名称" align="center">
          </el-table-column>
          <el-table-column
            prop="isActivation"
            label="是否激活"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.isActivation ? "是" : "否" }}
            </template>
          </el-table-column>
          <el-table-column
            prop="isExchange"
            label="是否兑换"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.isExchange ? "是" : "否" }}</template
            >
          </el-table-column>
          <el-table-column
            prop="isFrozen"
            label="是否冻结"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.isFrozen ? "是" : "否" }}</template
            >
          </el-table-column>
          <el-table-column
            prop="ascriptionUserName"
            label="当前归属用户名称"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <el-button
                class="btnwarning"
                type="warning"
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="pageBox">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="currentPage"
          >
          </el-pagination>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <el-dialog title="批量提示" :visible.sync="showActivePop" width="30%">
      <span>{{ popMsg }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showActivePop = false">取 消</el-button>
        <el-button type="primary" @click="PutCardActive">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="批量提示" :visible.sync="showFrozens" width="30%">
      <span>冻结无法逆转，是否需要批量冻结？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showFrozens = false">取 消</el-button>
        <el-button type="primary" @click="PutCardFrozens">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新增卡券 -->
    <el-dialog
      title="新增卡券"
      :visible.sync="createcardVoucherPop"
      width="30%"
      center
    >
      <el-form
        :model="newcardVoucherForm"
        :rules="newcardVoucherRule"
        ref="newcardVoucherForm"
        label-width="100px"
        class="demo-newcardVoucherForm"
        size="small"
      >
        <el-form-item label="经销商：" prop="groupIngId">
          <el-select
            v-model="newcardVoucherForm.groupInfo"
            clearable
            value-key="id"
            @change="changegroupIngName"
            placeholder="请选择"
          >
            <el-option
              v-for="item in goodsClassList"
              :key="item.id"
              :label="item.name"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称：" prop="goodsId">
          <el-select
            v-model="newcardVoucherForm.goodsInfo"
            clearable
            value-key="id"
            @change="changegoodsName"
            placeholder="请选择"
          >
            <el-option
              v-for="item in goodsList"
              :key="item.id"
              :label="item.name"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量：" prop="goodNum">
          <el-input
            v-model.number="newcardVoucherForm.goodNum"
            placeholder="请输入数量"
          ></el-input>
        </el-form-item>
        <el-form-item label="激活时间：" size="small" prop="isFrozen">
          <el-select
            v-model="newcardVoucherForm.isFrozen"
            clearable
            placeholder="请选择"
            size="small"
          >
            <el-option
              v-for="item in optionsIsFrozenAdd"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注：" prop="remark">
          <el-input
            v-model.number="newcardVoucherForm.remark"
            placeholder="请输入备注"
            label-width="10px"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetFormESC('newcardVoucherForm')" size="small"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="resetForm('newcardVoucherForm')"
          size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-drawer
      :visible.sync="createcardPop"
      :append-to-body="true"
      custom-class="form-drawer"
      @close="close()"
    >
      <div class="drawer" slot="title">详细信息</div>
      <div class="drawerContainer">
        <div class="drawerFormBox">
          <el-form
            :model="oldcardVoucherForm"
            :rules="oldcardVoucherRule"
            ref="oldcardVoucherForm"
            label-width="160px"
            class="demo-oldcardVoucherForm"
            size="small"
          >
            <el-form-item label="卡包编号：" prop="cardBagNumber">
              <el-input
                v-model="oldcardVoucherForm.cardBagNumber"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="卡编号：" prop="number">
              <el-input
                v-model="oldcardVoucherForm.number"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="分组名称：" prop="groupIngName">
              <el-input
                v-model="oldcardVoucherForm.groupIngName"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品名称：" prop="goodsName">
              <el-input
                v-model="oldcardVoucherForm.goodsName"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="激活间隔：" prop="activationNum">
              <el-input
                v-model.number="oldcardVoucherForm.activationNum"
                :disabled="true"
                size="small"
              ></el-input>
            </el-form-item>
            <el-form-item label="是否兑换:" prop="isExchange">
              <el-switch
                v-model="oldcardVoucherForm.isExchange"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :disabled="true"
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="是否冻结:" prop="isFrozen">
              <el-switch
                v-model="oldcardVoucherForm.isFrozen"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :disabled="true"
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="当前归属用户名称：" prop="ascriptionUserName">
              <el-input
                v-model.number="oldcardVoucherForm.ascriptionUserName"
                :disabled="true"
                size="small"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注：" prop="remark">
              <el-input
                v-model.number="oldcardVoucherForm.remark"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="drawerBtnBox">
          <el-button
            type="primary"
            @click="resetFormESC('oldcardVoucherForm')"
            size="small"
            >确 定</el-button
          >
        </div>
      </div>
    </el-drawer>
  </section>
</template>
<script>
export default {
  data() {
    return {
      page: 1,
      total: 0,
      tableData: [],
      carClassList: [], // 商品分类
      moreActiveType: false, // 修改激活状态true,false
      showActivePop: false, // 显示弹窗
      showFrozens: false,
      goodsList: [],
      loading: true,
      createcardVoucherPop: false,
      createcardPop: false,
      newcardVoucherForm: {
        groupInfo: {},
        goodsInfo: {},
        groupIngId: "",
        groupIngName: "",
        goodsId: "",
        goodsName: "",
        goodNum: "",
        remark: "",
      },
      oldcardVoucherForm: {
        cardBagNumber: "",
        number: "",
        groupIngId: "",
        groupIngName: "",
        goodsId: "",
        goodsName: "",
        activationNum: "",
        isExchange: true,
        exchangeTime: "",
        isFrozen: true,
        ascriptionUserName: "",
        remark: "",
        createTime: "",
      },
      isActivation: false,
      popMsg: "",
      newcardVoucherRule: {
        groupIngId: [
          { required: true, message: "请选择分类", trigger: "change" },
        ],
        goodsId: [
          { required: true, message: "请输入商品名称", trigger: "change" },
        ],
        goodNum: [{ required: true, message: "请输入数量", trigger: "blur" }],
        isFrozen: [
          { required: true, message: "请选择激活时间", trigger: "blur" },
        ],
      },
      optionsisActivation: [
        {
          value: false,
          label: "否",
        },
        {
          value: true,
          label: "是",
        },
      ],
      optionsIsExchange: [
        {
          value: false,
          label: "否",
        },
        {
          value: true,
          label: "是",
        },
      ],
      optionsIsFrozen: [
        {
          value: false,
          label: "否",
        },
        {
          value: true,
          label: "是",
        },
      ],
      optionsIsFrozenAdd: [
        {
          value: 0,
          label: "立即激活",
        },
        {
          value: 24,
          label: "24小时候激活",
        },
        {
          value: 48,
          label: "48小时候激活",
        },
      ],
      moreId: [],
      searchForm: {
        ascriptionUserName: "",
        cardBagNumber: "",
        createTime: "",
        goodsName: "",
        groupIngName: "",
        isActivation: "",
        isExchange: "",
        isFrozen: "",
        number: "",
      },
    };
  },
  created() {
    this.GetTbCardList(this.searchForm);
    this.GetTbClassifyDropList();
    this.GetTbGoodsDropList();
  },
  methods: {
    openSetActive(type) {
      if (this.moreId < 1) {
        this.$message.error("请选择需要操作的卡");
        return;
      }
      this.popMsg = type ? "是否批量激活卡？" : "是否批量取消激活卡？";
      this.moreActiveType = type;
      this.showActivePop = true;
    },
    openSetFrozens(type) {
      if (this.moreId < 1) {
        this.$message.error("请选择需要操作的卡");
        return;
      }
      this.popMsg = type ? "是否批量冻结卡？" : "是否批量取消冻结卡？";
      this.moreActiveType = type;
      this.showFrozens = true;
    },
    async PutCardActive() {
      let res = await this.$store.dispatch("PutCardActive", {
        isActivation: this.moreActiveType,
        ids: this.moreId,
      });
      if (res.success) {
        this.$message({
          message: "批量修改成功",
          type: "success",
        });
        this.showActivePop = false;
        this.GetTbCardList(this.searchForm);
      } else {
        this.$message.error(res.ErrorMessage || "网络异常");
      }
    },
    async PutCardFrozens() {
      //批量修改冻结
      let res = await this.$store.dispatch("PutCardFrozens", {
        isFrozen: this.moreActiveType,
        ids: this.moreId,
      });
      if (res.success) {
        this.$message({
          message: "批量修改成功",
          type: "success",
        });
        this.showFrozens = false;
        this.GetTbCardList(this.searchForm);
      } else {
        this.$message.error(res.ErrorMessage || "网络异常");
      }
    },
    changegroupIngName(selVal) {
      this.newcardVoucherForm.groupIngName = selVal.name;
      this.newcardVoucherForm.groupIngId = selVal.id;
    },

    changegoodsName(selVal) {
      this.newcardVoucherForm.goodsName = selVal.name;
      this.newcardVoucherForm.goodsId = selVal.id;
    },

    clearForm(formName) {
      // 清空筛选
      this.$refs[formName].resetFields();
    },
    currentPage(page) {
      this.page = page;
      this.GetTbCardList(this.searchForm);
    },
    checkAll(val) {
      let idList = [];
      val.forEach((item) => {
        idList.push(item.id);
      });
      this.moreId = idList;
    },

    async handleEdit(index, row) {
      let res = await this.$store.dispatch("GetTbCard", {
        id: row.id,
      });
      if (res.success) {
        this.oldcardVoucherForm = res.data || [];
      } else {
        this.$message.error(res.ErrorMessage || "网络异常");
      }
      this.editID = row.id;
      this.createcardPop = true;
    },

    onSubmit() {},
    async GetTbCardList(searchForm) {
      this.loading = true;
      let skip = (this.page - 1) * 10;
      // 请求案例
      let res = await this.$store.dispatch("GetTbCardList", {
        number: searchForm.number,
        groupIngId: searchForm.groupIngId,
        goodsName: searchForm.goodsName,
        isActivation: searchForm.isActivation,
        IsExchange: searchForm.IsExchange,
        IsFrozen: searchForm.IsFrozen,
        skip,
      });
      if (res.success) {
        this.tableData = res.data.itmes || [];
        this.total = res.data.totalCount;
      } else {
        this.$message.error(res.ErrorMessage || "网络异常");
      }
      this.loading = false;
    },

    createNew() {
      // this.newcardVoucherForm = {
      //   groupIngId: "",
      //   groupIngName: "",
      //   goodsId: "",
      //   goodsName: "",
      //   goodNum: ""
      // };
      setTimeout((this.createcardVoucherPop = true), 300);
    },

    resetFormESC(formName) {
      // 充值表单
      this.createcardVoucherPop = false;
      this.createcardPop = false;
      this.isActivation = false;
      this.newcardVoucherForm.groupInfo = {}
      this.newcardVoucherForm.goodsInfo = {}
      this.$refs[formName].resetFields();
    },

    async resetForm(formName) {
      console.log(this[formName]);
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 请求案例
          let res = await this.$store.dispatch("PostTbCards", {
            GroupIngId: this[formName].groupIngId,
            GroupIngName: this[formName].groupIngName,
            GoodsId: this[formName].goodsId,
            GoodsName: this[formName].goodsName,
            Num: this[formName].goodNum,
            activationTime: this[formName].isFrozen,
          });
          if (res.success) {
            this.GetTbCardList(this.searchForm);
            this.editID = "";
            setTimeout(this.resetFormESC("newcardVoucherForm"), 800);
          } else {
            this.$message.error(res.ErrorMessage || "网络异常");
          }
        } else {
          return false;
        }
      });
    },

    async GetTbClassifyDropList() {
      // 商品分类
      let res = await this.$store.dispatch("loadDistributor", {});
      if (res.success) {
        this.goodsClassList = res.data.itmes || [];
      } else {
        this.$message.error(res.ErrorMessage || "网络异常");
      }
    },

    async GetTbGoodsDropList() {
      // 商品
      let res = await this.$store.dispatch("GetTbGoodsDropList", {});
      if (res.success) {
        this.goodsList = res.data || [];
      } else {
        this.$message.error(res.ErrorMessage || "网络异常");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/varibles.scss";
.btnAdd {
  margin-bottom: $btnHeight;
  color: #ffff;
}
.btnwarning {
  color: $btnwarning;
}

.pageBox {
  padding-top: 10px;
  clear: both;
  .el-pagination {
    float: right;
  }

  .clear {
    clear: both;
  }
}
</style>
